<template>
  <div>
    <Form>
      <FormItem label="视频" prop="realname">
        <Button @click='upload("video")' type="primary"  icon="ios-search">上传视频</Button>
      </FormItem>
      <FormItem>
        <video v-if="prodGroupBasicObj.video_url" :src="prodGroupBasicObj.video_url" style="width: 70px;height: 70px;border: 1px solid #eeeeee;">
        </video>
      </FormItem>
    </Form>
    <Modal v-model="uploadModal" title="图片管理" class="uploadModal-wrap" :closable='isClosable'>
      <!-- 上传组件 -->
      <div>
        <UploadTool :showUpload='showUpload' :optionObj='uploadImgPathList' @getSelectedImgList='getSelectedImgList'></UploadTool>
      </div>
      <div slot="footer">
        <Button @click='cancelUploadModal'>取消</Button>
        <Button type="primary" @click='confirm(uploadType)'>确定</Button>
      </div>
    </Modal>
  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import Tables from '_c/tables'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import {
    getTableData
  } from '@/api/data'
  // 上传组件
  import UploadTool from '../../../components/uploadTool/uploadTool.vue'
  import {uploadImgPathList} from '@/config/global.js'
  export default {
    name: 'tables_page',
    components: {
      Tables,
      UploadTool
    },
    created() {

    },
    watch: {

    },
    mounted() {


    },
    computed: {
      ...mapState({
        prodGroupBasicObj: state => state.share.prodGroupBasicObj

      }),
    },
    data() {
      return {
         isClosable:false,
        fromChild:{
          selectedImgList:[]
        },
        uploadModal:false,
       uploadImgPathList:uploadImgPathList,
        showUpload:false,

        formValidate: {},
        tableData: [],
        ruleValidate: {},
        columns: [{
            title: '封面',
            slot: 'name'
          },
          {
            title: '规格名称',
            slot: 'age'
          },
          {
            title: '周期价格',
            slot: 'birthday'
          },
          {
            title: '成本',
            slot: 'address'
          },
          {
            title: '库存',
            slot: 'address'
          },
          {
            title: '虚拟销量',
            slot: 'address'
          }

        ],
        data: [{
            name: '王小明',
            age: 18,
            birthday: '919526400000',
            address: '北京市朝阳区芍药居'
          }

        ],
        editIndex: 0, // 当前聚焦的输入框的行数
        editName: '', // 第一列输入框，当然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁
        editAge: '', // 第二列输入框
        editBirthday: '', // 第三列输入框
        editAddress: '', // 第四列输入框
      }
    },
    methods: {
      ...mapMutations([

        'setProdGroupBasicObj'

      ]),
      cancelUploadModal(){
        this.uploadModal=false;
      },
      //
      upload(type) {
        // type为上传的类型，‘cover’封面
        this.uploadType=type;
        this.uploadModal = true;
        this.showUpload = true;


      },
      getSelectedImgList(e){
        this.fromChild.selectedImgList=e;
        console.log(e)


      },
      confirm(type) {
        if(!this.fromChild.selectedImgList.length){
          this.$Message.error('请选择视频!');
          return
        }

        if(this.fromChild.selectedImgList[0].extension!='mp4'){
          this.$Message.error('请选择视频!');
          return
        }
        this.uploadModal=false;
        let obj=this.prodGroupBasicObj;
        obj.video_url=this.fromChild.selectedImgList[0].url;
        obj.video_type=this.fromChild.selectedImgList[0].extension;
        obj.video_name=this.fromChild.selectedImgList[0].path_name;
        // obj.cover_image_file_name=this.fromChild.selectedImgList[0].path_name;
        this.setProdGroupBasicObj(obj)


      },

      handleEdit(row, index) {
        this.editName = row.name;
        this.editAge = row.age;
        this.editAddress = row.address;
        this.editBirthday = row.birthday;
        this.editIndex = index;
      },
      handleSave(index) {
        this.data[index].name = this.editName;
        this.data[index].age = this.editAge;
        this.data[index].birthday = this.editBirthday;
        this.data[index].address = this.editAddress;
        this.editIndex = -1;
      },
      getBirthday(birthday) {
        const date = new Date(parseInt(birthday));
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        return `${year}-${month}-${day}`;
      },
      change(status) {
        this.$Message.info('开关状态：' + status);
      }
    },

  }
</script>

<style lang="scss">
  // @import "./goods-detail";
</style>
